<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="font/iconfont.css" />
	</head>

	<body>
		<div class="header">
			<div class="header_box">
				<img src="images/index/nba-icon.png" class="logo" />
				<div class="nav_box">
					<ul class="nav">
						<a href="javascript:;">
							<li style="margin-left: 60px;">首页</li>
						</a>
						<a href="javascript:;">
							<li>视频</li>
						</a>
						<a href="javascript:;">
							<li>新闻</li>
						</a>
						<a href="javascript:;">
							<li>图集</li>
						</a>
						<a href="javascript:;" id="team">
							<li>球队<i class="iconfont icon-arrow_down"></i></li>

						</a>
						<a href="javascript:;" id="player">
							<li>球员<i class="iconfont icon-arrow_down"></i></li>
							<div class="player_box">
								<p>现役球员</p>
								<p>退役球员</p>
								<div class="up_triangle2"></div>
							</div>
						</a>
						<a href="javascript:;">
							<li>赛程<i class="iconfont icon-arrow_down"></i></li>
						</a>
						<a href="javascript:;">
							<li>排名<i class="iconfont icon-arrow_down"></i></li>
						</a>
						<a href="javascript:;">
							<li>数据<i class="iconfont icon-arrow_down"></i></li>
						</a>
						<a href="javascript:;">
							<li>专题<i class="iconfont icon-arrow_down"></i></li>
						</a>
						<a href="javascript:;">
							<li>更多<i class="iconfont icon-arrow_down"></i></li>
						</a>
					</ul>
				</div>
				<div class="team_box">
					<div class="up_triangle"></div>
					<div class="team">
						<div class="team_title" style="border-right: 2px solid rgb(7,40,64);">东部联盟</div>
						<div class="team_title_child" style="border-right: 2px solid rgb(229,229,229);">
							<p>东南赛区</p>
							<p>中部赛区</p>
							<p>大西洋赛区</p>
						</div>
						<div class="team_item_box" style="border-right: 2px solid rgb(229,229,229);">
							<a href="javascript:;" class="team_item">
								<div class="team_logo"></div>
								<span>黄蜂</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo2"></div>
								<span>骑士</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo3"></div>
								<span>猛龙</span>
							</a>
						</div>
						<div class="team_item_box team_item_box_even" style="border-right: 2px solid rgb(229,229,229);">
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo4"></div>
								<span>老鹰</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo5"></div>
								<span>公牛</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo6"></div>
								<span>尼克斯</span>
							</a>
						</div>
						<div class="team_item_box" style="border-right: 2px solid rgb(229,229,229);">
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo7"></div>
								<span>奇才</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo8"></div>
								<span>活塞</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo9"></div>
								<span>凯尔特人</span>
							</a>
						</div>
						<div class="team_item_box team_item_box_even" style="border-right: 2px solid rgb(229,229,229);">
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo10"></div>
								<span>魔术</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo11"></div>
								<span>步行者</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo12"></div>
								<span>篮网</span>
							</a>
						</div>
						<div class="team_item_box" style="border-right: 2px solid rgb(229,229,229);">
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo13"></div>
								<span>热火</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo14"></div>
								<span>雄鹿</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo15"></div>
								<span>76人</span>
							</a>
						</div>
					</div>
					<div class="team">
						<div class="team_title">西部联盟</div>
						<div class="team_title_child">
							<p>太平洋赛区</p>
							<p>西北赛区</p>
							<p>西南赛区</p>
						</div>
						<div class="team_item_box">
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo16"></div>
								<span>勇士</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo17"></div>
								<span>爵士</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo18"></div>
								<span>马刺</span>
							</a>
						</div>
						<div class="team_item_box team_item_box_even">
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo19"></div>
								<span>快船</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo20"></div>
								<span>雷霆</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo21"></div>
								<span>火箭</span>
							</a>
						</div>
						<div class="team_item_box">
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo22"></div>
								<span>国王</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo23"></div>
								<span>开拓者</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo24"></div>
								<span>灰熊</span>
							</a>
						</div>
						<div class="team_item_box team_item_box_even">
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo25"></div>
								<span>湖人</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo26"></div>
								<span>掘金</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo27"></div>
								<span>鹈鹕</span>
							</a>
						</div>
						<div class="team_item_box">
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo28"></div>
								<span>太阳</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo29"></div>
								<span>森林狼</span>
							</a>
							<a href="javascript:;" class="team_item">
								<div class="team_logo logo30"></div>
								<span>独行侠</span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	</body>
	<script>
		//当鼠标放在球队上显示球队隐藏的二级菜单
		$('#team').on('mouseover', function() {
			$('.team_box').show();
			$('#team li').addClass('hover');
		})
		//当鼠标离开球队的二级菜单时隐藏球队的二级菜单
		$('.team_box').on('mouseleave', function() {
			$('.team_box').hide();
			$('#team li').removeClass('hover');
		})
		//当鼠标移入每一个隐藏二级菜单的各个球队时改变其背景颜色
		$('.team_item').on('mouseover', function() {
			$(this).addClass('bg');
		});
		$('.team_item').on('mouseout', function() {
			$(this).removeClass('bg');
		});
        //当鼠标移入球员导航时显示球员的二级菜单
        $('#player').on('mouseover',function(){
        	$('.player_box').show();
        });
        //当鼠标离开球员二级菜单时隐藏球员的二级菜单
        $('.player_box').on('mouseleave',function(){
			$('.player_box').hide();
			//并还原球员的导航颜色
			$('#player li').removeClass('hover');
		});
		//当鼠标移入球员二级菜单改变其背景色
		$('.player_box p').on('mouseover',function(){
			$(this).addClass('hover');
		});
		//当鼠标离开球员二级菜单还原其背景色
		$('.player_box p').on('mouseout',function(){
			$(this).removeClass('hover');
		});
		//当鼠标移入球员二级菜单时改变导航的文字颜色
		$('.player_box').on('mouseover',function(){
			$('#player li').addClass('hover');
		});
	</script>

</html>